<template>
  <div class="right-panel">
  
  <el-tabs v-model="activeName" >
    <el-tab-pane :label="selectedItem!=null?'组件属性['+selectedItem.data.name+']':'组件属性'" name="field">
      <div v-if="selectedItem">
       <el-form ref="form" :model="form" label-width="80px" :size="'mini'">
           <el-form-item :label="form.fieldConfig.label1" >
            <el-input type="text" class="form-control"  v-model="selectedItem.data.dataField"/>
          </el-form-item>
           <el-form-item :label="form.fieldConfig.label2" >
            <el-input type="text" class="form-control"  v-model="selectedItem.data.label"/>
          </el-form-item>
          <el-form-item :label="form.fieldConfig.label3" >
            <el-input type="text" class="form-control"  v-model="selectedItem.data.value"/>
          </el-form-item>
          <el-form-item :label="form.fieldConfig.label4" >
            <el-input type="text" class="form-control"  v-model="selectedItem.data.placeholder"/>
          </el-form-item>
       </el-form>
      </div>
    </el-tab-pane>
    <el-tab-pane label="表单属性" name="form">
      <div v-if="formItem">
       <el-form ref="form" :model="form" label-width="80px" :size="'mini'">
           <el-form-item :label="form.formConfig.label1" >
            <el-input type="text" class="form-control"  v-model="formItem.name"/>
          </el-form-item>
           <el-form-item :label="form.formConfig.label2" >
            <el-input type="text" class="form-control"  v-model="formItem.model"/>
          </el-form-item>
          <el-form-item :label="form.formConfig.label3" >
            <el-input type="text" class="form-control"  v-model="formItem.rule"/>
          </el-form-item>
          <el-form-item :label="form.formConfig.label4" >
            <!-- <el-input type="text" class="form-control"  v-model="formItem.disabled"/> -->
            <el-radio-group v-model="formItem.disabled">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="form.formConfig.label5" >
            <el-input type="text" class="form-control"  v-model="formItem.labelWidth"/>
          </el-form-item>
          <el-form-item :label="form.formConfig.label6" >
            <!-- <el-input type="text" class="form-control"  v-model="formItem.labelPosition"/> -->
            <el-radio-group v-model="formItem.labelPosition" size="small">
              <el-radio-button label="left"></el-radio-button>
              <el-radio-button label="right" ></el-radio-button>
              <!-- <el-radio-button label="top"></el-radio-button> -->
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="form.formConfig.label7" >
            <el-input type="text" class="form-control"  v-model="formItem.size"/>
          </el-form-item>
          <el-form-item :label="form.formConfig.label8" >
            <el-input type="text" class="form-control"  v-model="formItem.gutter"/>
          </el-form-item>
       </el-form>
      </div>
    </el-tab-pane>
  </el-tabs>

  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: null,
      formItem:null,
      activeName:'field',
      form:{
        formConfig:{
          label1:'表单名',
          label2:'表单模型',
          label3:'校验模型',
          label4:'是否禁用',
          label5:'标签宽度',
          label6:'标签位置',
          label7:'表单大小',
          label8:'栅格间距'
        },
        fieldConfig:{
          label1:'绑定字段',
          label2:'字段名称',
          label3:'字段值',
          label4:'提示信息',
          label5:'栅格',
          label6:'是否禁用',
          label7:'是否只读',
          label8:'文本类型',
          
        }
        
      }
    };
  },
  props: ["item","formc"],

  watch: {
    item(val) {
      this.selectedItem = val;
    },
    formc(val) {
      this.formItem = val;
      
    }
  },
  created(){
      
  },
  methods:{
    init(val){
      this.activeName=val
    }
  }
  
};
</script>

<style scoped>
.right-panel {
  padding: 3px;
}

.form-group {
  margin-bottom: 20px;
}
</style>